import React, { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Container } from '@/components/common/container';
import { Toolbar, ToolbarActions, ToolbarHeading } from '@/layouts/demo1/components/toolbar';
import { Button } from '@/components/ui/button';
import { Plus, Filter } from 'lucide-react';
import TaskList from '@/components/project/task-list';

const TaskManagementPage = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const projectId = searchParams.get('projectId');

  const handleAddTask = () => {
    const url = projectId 
      ? `/project-management/task-form?projectId=${projectId}`
      : '/project-management/task-form';
    navigate(url);
  };

  const handleEditTask = (task) => {
    navigate(`/project-management/task-form/${task.id}`);
  };

  const handleViewTask = (task) => {
    navigate(`/project-management/task-detail/${task.id}`);
  };

  const handleDeleteTask = (task) => {
    if (confirm(`确定要删除任务"${task.task_name}"吗？`)) {
      console.log('删除任务:', task);
      // TODO: 调用删除API
    }
  };

  return (
    <>
      <Container>
        <Toolbar>
          <ToolbarHeading
            title="任务管理"
            description={projectId ? "管理项目任务" : "管理所有任务"}
          />
          <ToolbarActions>
            <Button onClick={handleAddTask}>
              <Plus className="size-4 me-2" />
              创建任务
            </Button>
          </ToolbarActions>
        </Toolbar>
      </Container>

      <Container>
        <TaskList 
          onEdit={handleEditTask}
          onView={handleViewTask}
          onDelete={handleDeleteTask}
          projectId={projectId}
        />
      </Container>
    </>
  );
};

export default TaskManagementPage; 